<template>
  <div class="page-clientsManage">
    <el-row class="pa-20">
      <el-card class="table-card mt-20">
        <div class="deliverySetting">
          <div class="deliverySetting-table" v-for="(item, idx) in Cities" :key="idx">
            <div class="table-body" v-for="(pro, idx2) in item.pros" :key="idx2">
              <div class="width120">
                <span style="display: inline-block; line-height: 30px; cursor: pointer">
                  <el-tag
                    @change="handleChecked('pro', pro)"
                    :label="pro.pname"
                    v-model="pro.checked"
                    :key="pro.pid"
                    >{{ pro.pname }}</el-tag
                  >
                </span>
              </div>
              <div class="first-col">
                <span
                  v-if="idx2 == 0"
                  style="display: inline-block; line-height: 30px; cursor: pointer"
                >
                  <el-checkbox
                    @change="handleChecked('place', item)"
                    :label="item.cname"
                    v-model="item.checked"
                    :key="item.cid"
                    >{{ item.cname }}</el-checkbox
                  >
                </span>
              </div>
              <div class="width265">
                <el-checkbox
                  v-for="c in pro.cities"
                  v-model="c.checked"
                  :label="c.cityName"
                  :key="c.cityId"
                  @change="handleChecked('city', c)"
                  >{{ c.cityName }}</el-checkbox
                >
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "deliverySetting",
  components: {},
  props: {},
  data() {
    return {
      itemTitle: "",
      itemId: 0,
      Cities: [
        { pid: "1", pname: "公司地点", cid: 1, cname: "全国", cityId: 1, cityName: "北京" },
        { pid: "1", pname: "公司地点", cid: 1, cname: "全国", cityId: 2, cityName: "上海" },
        { pid: "1", pname: "公司地点", cid: 1, cname: "全国", cityId: 3, cityName: "广州" },
        { pid: "1", pname: "公司地点", cid: 1, cname: "全国", cityId: 4, cityName: "深圳" },
        { pid: "1", pname: "公司地点", cid: 1, cname: "全国", cityId: 5, cityName: "杭州" },
        { pid: "1", pname: "公司地点", cid: 1, cname: "全国", cityId: 6, cityName: "成都" },
        { pid: "2", pname: "工作经验", cid: 2, cname: "不限", cityId: 1, cityName: "应届毕业生" },
        { pid: "2", pname: "工作经验", cid: 2, cname: "不限", cityId: 2, cityName: "1年以下" },
        { pid: "2", pname: "工作经验", cid: 2, cname: "不限", cityId: 3, cityName: "1-3年" },
        { pid: "2", pname: "工作经验", cid: 2, cname: "不限", cityId: 4, cityName: "3-5年" },
        { pid: "2", pname: "工作经验", cid: 2, cname: "不限", cityId: 5, cityName: "5-10年" },
        { pid: "2", pname: "工作经验", cid: 2, cname: "不限", cityId: 6, cityName: "10年以上" },
        { pid: "3", pname: "学历要求", cid: 3, cname: "不限", cityId: 1, cityName: "大专" },
        { pid: "3", pname: "学历要求", cid: 3, cname: "不限", cityId: 2, cityName: "本科" },
        { pid: "3", pname: "学历要求", cid: 3, cname: "不限", cityId: 3, cityName: "硕士" },
        { pid: "3", pname: "学历要求", cid: 3, cname: "不限", cityId: 4, cityName: "博士" },
        { pid: "4", pname: "行业领域", cid: 4, cname: "不限", cityId: 1, cityName: "移动互联网" },
        { pid: "4", pname: "行业领域", cid: 4, cname: "不限", cityId: 2, cityName: "电子商务" },
        { pid: "4", pname: "行业领域", cid: 4, cname: "不限", cityId: 3, cityName: "金融" },
        { pid: "4", pname: "行业领域", cid: 4, cname: "不限", cityId: 4, cityName: "企业服务" },
        { pid: "4", pname: "行业领域", cid: 4, cname: "不限", cityId: 5, cityName: "游戏" },
        { pid: "4", pname: "行业领域", cid: 4, cname: "不限", cityId: 6, cityName: "硬件" },


      ],
      checkedCities: [0],
    };
  },
  computed: {},
  methods: {
    initPage() {
      let { itemId, itemTitle } = this.$route.query;
      this.itemId = itemId;
      this.itemTitle = itemTitle;

      this.initAreaData();
    },
    //初始化数据
    initAreaData() {
      this.Cities = this.Cities.map((item) => {
        let res = item;
        if (this.checkedCities.includes(item.cityId)) {
          res.checked = true;
        } else {
          res.checked = false;
        }
        return res;
      });

      let resCities = [];
      this.Cities.forEach((item) => {
        let obj = {};
        let existsCountry = resCities.find((c) => {
          return c.cid == item.cid;
        });

        if (existsCountry) {
          obj = existsCountry;
        } else {
          obj.cid = item.cid;
          obj.cname = item.cname;
        }

        obj.checked = false;

        if (!obj.pros) {
          obj.pros = [];
        }

        let existsPro = obj.pros.find((c) => {
          return c.pid == item.pid;
        });

        if (!existsPro) {
          existsPro = {
            pid: item.pid,
            pname: item.pname,
            checked: false,
          };
          obj.pros.push(existsPro);
        }

        if (!existsPro.cities) {
          existsPro.cities = [];
        }

        existsPro.cities.push({
          cityId: item.cityId,
          cityName: item.cityName,
          checked: item.checked,
        });

        if (!existsCountry) {
          resCities.push(obj);
        }
      });

      this.Cities = resCities;
      this.opreationData();
    },
    //操作数据
    opreationData() {
      this.Cities.forEach((c) => {
        c.pros.forEach((p) => {
          if (p.cities && p.cities.length > 0) {
            p.checked = p.cities.every((p) => p.checked);
          }
        });

        if (c.pros && c.pros.length > 0) {
          c.checked = c.pros.every((p) => p.checked);
        }
      });
    },
    handleChecked(level, item) {
      let isChecked = item.checked;
      switch (level) {
        case "place":
          if (item && item.pros) {
            item.pros.forEach((p) => {
              if (p.cities) {
                p.cities.forEach((c) => {
                  c.checked = isChecked;
                });
              }
            });
          }
          break;
        case "pro":
          if (item && item.cities) {
            item.cities.forEach((c) => {
              c.checked = isChecked;
            });
          }
          break;
        case "city":
          break;
      }
      this.opreationData();
    },
  },
  created: function () {},
  mounted() {
    this.initPage();
  },
  watch: {},
};
</script>

<style>
.el-checkbox__label {
  padding-left: 5px;
}
.first-col {
  padding-left: 20px;
  width: 60px;
}
.deliverySetting {
  padding: 8px 0;
  position: relative;
}
.deliverySetting .el-table thead tr th {
  font-size: 14px;
}
.width265 {
  padding-left: 64px;
}
.deliverySetting .deliverySetting-table .table-head .width120,
.deliverySetting .deliverySetting-table .table-body .width120 {
  padding-left: 50px;
}
.deliverySetting .el-table tbody tr td {
  vertical-align: baseline;
}
.deliverySetting .el-table tbody tr td p {
  line-height: 30px;
}
.deliverySetting .el-table tbody tr td .el-checkbox-group {
  display: flex;
  flex-direction: column;
}
.deliverySetting .el-table tbody tr td .el-checkbox-group label {
  line-height: 30px;
  margin-left: 0;
}
.deliverySetting .deliverySetting-table {
  font-size: 14px;
  color: #333;
}
.deliverySetting .deliverySetting-table .table-head,
.deliverySetting .deliverySetting-table .table-body {
  display: flex;
  padding: 10px 0;
}
.deliverySetting .deliverySetting-table .table-head .selection,
.deliverySetting .deliverySetting-table .table-body .selection {
  /* width: 45px; */
  text-align: center;
  line-height: 36px;
}

/* .deliverySetting .deliverySetting-table .table-head .width265,
.deliverySetting .deliverySetting-table .table-body .width265 {
  width: 265px;
} */
.deliverySetting .deliverySetting-table .table-head {
  height: 20px;
  align-items: center;
  background-color: #e7f2ff;
}
.deliverySetting .deliverySetting-table .table-body {
  border-bottom: 1px solid #e4e4e4;
  color: #666;
}
.deliverySetting .deliverySetting-table .table-body:hover {
  background-color: #f5f7fa;
}
/* .deliverySetting .deliverySetting-table .table-body .width265 {
  display: flex;
  flex-direction: column;
} */
.deliverySetting .deliverySetting-table .table-body .width265 label {
  line-height: 30px;
  margin-left: 0;
  color: #666;
  padding: 0 5px;
}
.deliverySetting .deliverySetting-table .table-body p {
  line-height: 30px;
}
.deliverySetting .deliverySetting-btn {
  /*width: 100%;*/
  height: 59px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: absolute;
  top: -55px;
  right: -16px;
  z-index: 100;
}
.deliverySetting .deliverySetting-btn .tabs-btn {
  min-width: 90px;
  height: 34px;
  line-height: 32px;
  padding: 0 10px;
  color: #2387f7;
  border: solid 1px #4fa2ff;
  background-color: #e7f2ff;
  cursor: pointer;
}
.deliverySetting .deliverySetting-btn .tabs-btn:nth-of-type(2) {
  margin: 0 15px;
}
.deliverySetting .deliverySetting-btn .tabs-btn input {
  border: none;
  background: transparent;
  color: inherit;
  cursor: inherit;
  outline: none;
  margin: 0;
  padding: 0;
}
.deliverySetting .deliverySetting-btn .tabs-btn:hover {
  color: #fff;
  background-color: #2387f7;
}
.deliverySetting .setDistributorDailog .el-input {
  width: 270px;
}
.page-clientsManage {
  line-height: 0px;
}
.palace {
  padding: 14px;
}
</style>
